<template>
  <div class="map-container" :style="{ width: props.containerWidth }">
    <div :id="props.id" :style="'height:'+height+'px'">
    </div>
  </div>
</template>

<script setup>
  import AMapLoader from '@amap/amap-jsapi-loader';
  // import { shallowRef } from '@vue/reactivity';

  import { ref, onMounted, shallowRef } from 'vue';

  // window._AMapSecurityConfig = {
  //   securityJsCode: '0f34a478b8c7cf81e38c792794939a44', // 申请的安全密钥
  // };
  const props = defineProps({
    mapKey: {
      type: String,
      default: 'd49d98566d393aa95f922bf32c167924',
    },
    keywordId: {
      type: String,
      required: true,
      default: '',
    },
    id: {
      type: String,
      default: () => {
        return `vue-amap-${(Math.random() * 1000).toFixed(0)}`;
      },
    },
    containerWidth: {
      type: String,
      default: '100%',
    },
    height: {
      type: [Number, String],
      required: false,
      default: 400,
    },
    width: {
      type: [Number, String],
      required: false,
      default: '100%',
    },
  });

  const emit = defineEmits(['mapCallback']);

  // const mapData = ref<any>({
  //   mapId: props.id,
  //   lng: '',
  //   lat: '',
  // });
  const addressDetail = ref({
    province: '',
    provinceCode: '0',
    city: '',
    cityCode: '0',
    district: '',
    districtCode: '0',
    longitude: '',
    latitude: '',
  });

  // const map = shallowRef(null);
  const map = ref(shallowRef(null));

  const AMapObj = ref(); // 地图
  const markerObj = ref(); // 点标记Marker
  const geolocationObj = ref(); // 定位
  const geocoderObj = ref();
  const autocompleteObj = ref();
  const placeSearchObj = ref();

  // 绘制地点marker
  const drawMarker = (longitude, latitude) => {
    if (markerObj.value) {
      markerObj.value.setMap(null);
    }
    markerObj.value = new AMapObj.value.Marker({
      // position: new AMapObj.value.LngLat(longitude, latitude),
      position: [longitude, latitude],
      anchor: 'bottom-center',
    });
    map.value.add(markerObj.value);
    map.value.setZoomAndCenter(16, [longitude, latitude]);
  };
  // 地图拖拽后 和 输入关键字后选择 的回调函数
  const callBack = (result, tag) => {

  };
  // 初始化当前城市
  const initLocalCity = () => {
    drawMarker(addressDetail.value.longitude, addressDetail.value.latitude);
  };
  // 初始化当前位置(浏览器定位)
  const initLocalPoint = () => {
    geolocationObj.value.getCurrentPosition(function (status, result) {
      console.log(status);
      console.log(result);
      if (status === 'complete') {
        //
      } else {
        drawMarker(114.317736, 30.533092);
      }
    });
  };
  // 输入关键字搜索，根据关键字更新地图并获取信息
  const searchByKey = (queryString, callback) => {
    placeSearchObj.value.search(queryString, (status, result) => {
      if (result && typeof result === 'object' && result.poiList) {
        const list = result.poiList.pois;
        list.forEach((item) => {
          item.value = item.name;
          item.label = item.name;
        });
        callback(list);
      } else {
        callback([]);
      }
    });
  };
  // 点击搜索项
  // const handleSelect = (item: any) => {
  //   const { pname, cityname, adname, address, name } = item;
  //   const { lng, lat } = item.location;
  //   addressDetail.value = {
  //     longitude: lng,
  //     latitude: lat,
  //     address,
  //     zone: [pname, cityname, adname],
  //     name,
  //   };
  //   map.value.setZoomAndCenter(16, [lng, lat]);
  // };
  // 点击地图
  const handleClick = (e) => {
    const { lng, lat } = e.lnglat;
    // 逆地理编码（经纬度 -> 地址）
    geocoderObj.value.getAddress([lng, lat], (status, result) => {
      console.log(result);
      if (status === 'complete' && result.info === 'OK') {
        const { addressComponent, formattedAddress } = result.regeocode;
        const { oriCity, province, district } = addressComponent;
        let city = oriCity;
        if (!city) {
          // 直辖市
          city = province;
        }
        addressDetail.value = {
          longitude: lng,
          latitude: lat,
          address: formattedAddress,
          zone: [province, city, district],
        };
        initLocalCity();
      } else {
        console.log('根据经纬度查询地址失败');
      }
    });
  };
  const mapInit = () => {
    AMapLoader.load({
      key: props.mapKey, // 申请好的Web端开发者Key，首次调用 load 时必填
      version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
      // version: '1.4.15', // 2.0 用不了？？
      plugins: [
        'AMap.Scale', // 工具条，控制地图的缩放、平移等
        'AMap.ToolBar', // 比例尺，显示当前地图中心的比例尺
        'AMap.Geolocation', // 定位，提供了获取用户当前准确位置、所在城市的方法
        // 'AMap.HawkEye', // 鹰眼，显示缩略图
        'AMap.Geocoder',
      ], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      AMapUI: {
        version: '1.1',
        plugins: [],
      },
      Loca: {
        version: '2.0.0', // Loca 版本，缺省 1.3.2
      },
    }).then((AMap) => {
      AMapObj.value = AMap;
      map.value = new AMap.Map(props.id, {
        viewMode: '3D', // 是否为3D地图模式
        zoom: 5, // 初始化地图级别
        zooms: [2, 22],
        center: [108.940261, 34.384452], // 初始化地图中心点位置
        dragEnable: true, // 禁止鼠标拖拽
        scrollWheel: true, // 鼠标滚轮放大缩小
        doubleClickZoom: true, // 双击放大缩小
        keyboardEnable: true, // 键盘控制放大缩小移动旋转
      });
      AMap.plugin(
        ['AMap.ToolBar', 'AMap.Scale', 'AMap.Geolocation', 'AMap.AutoComplete', 'AMap.PlaceSearch', 'AMap.Geocoder'],
        () => {
          // 缩放条
          const toolbar = new AMap.ToolBar();
          map.value.addControl(toolbar);
          // 比例尺
          const scale = new AMap.Scale();
          map.value.addControl(scale);
          // 定位
          const geolocation = new AMap.Geolocation({
            enableHighAccuracy: true, // 是否使用高精度定位，默认:true
            timeout: 10000, // 超过10秒后停止定位，默认：5s
            position: 'RT', // 定位按钮的停靠位置
            buttonOffset: new AMap.Pixel(10, 20), // 定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
            zoomToAccuracy: true, // 定位成功后是否自动调整地图视野到定位点
          });
          geolocationObj.value = geolocation;
          map.value.addControl(geolocation);

          geocoderObj.value = new AMap.Geocoder({
            // city: '全国',
          });
          // 输入提示[无需再手动执行search方法，autoComplete会根据传入input对应的DOM动态触发search]
          autocompleteObj.value = new AMap.Autocomplete({
            // input 为绑定输入提示功能的input的DOM ID
            input: props.keywordId,
          });
          // 关键词查询（暂时没有用到）
          placeSearchObj.value = new AMap.PlaceSearch({
            map: map.value,
            city: '',
            pageSize: 5, // 单页显示结果条数
            pageIndex: 1, // 页码
            citylimit: false, // 是否强制限制在设置的城市内搜索
            autoFitView: true,
          });
        }
      );
      // 添加点击事件
      map.value.on('click', handleClick);
      // 初始化坐标
      if (addressDetail.value.longitude && addressDetail.value.latitude) {
        initLocalCity();
      } else {
        initLocalPoint();
      }
    }).catch(e => {
      console.log(e);
    });
  };

  // 回调
  const mapCBK = () => {
    emit('mapCallback', addressDetail.value);
  };

  onMounted(async () => {
    mapInit();
  });
</script>

<style lang="less">

</style>
